<style>
.selectwords .btn-group{display:block;margin:5px;text-align: left;float: left;}
.selectwords a{display:block;margin:5px;text-align: left;padding:5px 15px;}
p {margin: 0 0;}
.container{width:100% !important;}
</style>
<div id="{{$pageID}}">
<div class="form-inline">
<input type="text" id="{{$pageID}}-searchword" class="form-control"><button id="{{$pageID}}-search">{{__('Search')}}</button>

</div>

<div class="row">

<div class="col-md-2">
	<div class="ui-portlet-header">
	      <span class="title">书籍列表</span>    
	</div>
	<div>
		{{loop $books  $book}}
		<a class="btn btn-default {{if $book['Book']['id']==$_REQUEST['book_id']}}active{{/if}} btn-block" href="?type=select&m={{$_REQUEST['m']}}&targetid={{$_REQUEST['targetid']}}&book_id={{$book['Book']['id']}}"> {{$book['Book']['name']}} </a>
		{{/loop}}
	</div> 
</div> 	
<div class="col-md-10">
	<div class="ui-portlet-header">
	      <span class="title">选择章节</span>       <small><span style="font-size:13px;font-weight:normal;">（提示：点击标题即可选中进行关联）</span></small>             
	</div>
	<div id="{{$pageID}}-words" class="selectwords row clearfix">
	<?php $last_book_id = null; ?>
	{{loop $select_items $key $item}}
		{{if $last_book_id===null }} <div class="col-md-3"> <?php $last_book_id = $item[$current_model]['book_id']; ?>
		
		{{elseif $last_book_id != $item[$current_model]['book_id'] }} </div><div class="col-md-3"> <?php $last_book_id = $item[$current_model]['book_id']; ?> {{/if}}
		
		<p class="clearfix" style="clear:both;"><a href="javascript:;" rel="{{$item[$current_model]['id']}}" class="btn btn-default btn-xs chose-item" type="button">{{$item[$current_model]['name']}}</a></p>			 
		{{if $item['children']}}
			{{loop $item['children'] $seckey $secitem}}
				  <p><a href="javascript:;" rel="{{$secitem[$current_model]['id']}}" style="text-indent:2em;" class="btn btn-default btn-xs chose-item" type="button">|---{{$secitem[$current_model]['name']}}</a></p>
				  {{if $secitem['children']}}
						{{loop $secitem['children'] $thirdkey $thirditem}}
							 <p><a href="javascript:;" rel="{{$thirditem[$current_model]['id']}}" style="text-indent:4em;" class="btn btn-default btn-xs chose-item" type="button">|---{{$thirditem[$current_model]['name']}}</a></p>
						{{/loop}}					
					{{/if}}
			{{/loop}}		
		{{/if}}
	{{/loop}}
		</div>
		
	</div>
	{{$page_navi}}
	<hr/>
	<div id="{{$pageID}}-selected" class="selectwords clearfix"></div>
	
	<div><input type="button" class="btn btn-warning" onclick="window.close();" value="确定"></div>
</div>
</div>
</div>

<script>
$(function(){
	$('#{{$pageID}}-search').on('click',function(){
		var text = $('#{{$pageID}}-searchword').val();
		var dialog = $(this).closest('.ui-dialog-content');
		var url='{{Router::url("/admin/$current_model/list?type=select&m=$relatedmodel&targetid=$targetid")}}';
		url +='&val='+encodeURIComponent(text);
		if(dialog.size()>0){
			dialog.load(url);
		}
		else{
			window.location.href=url;
		}
	})
	//$(document).on('')
	$('#{{$pageID}}-words').on('click','a.chose-item',function(){
		var rel = $(this).attr('rel');
		var html = '<div class="btn-group" rel="'+$(this).attr('rel')+'" relword="'+$(this).html()+'"> \
				<input type="hidden" name="data[{{$current_model}}]['+$(this).attr('rel')+'][{{$associd}}]" value="'+$(this).attr('rel')+'">\
				<input type="hidden" name="data[{{$current_model}}]['+$(this).attr('rel')+'][relatedmodel]" value="{{$relatedmodel}}">\
				<button type="button" class="btn btn-primary">'+$(this).html()+'</button>\
				<button type="button" class="btn btn-primary btn-remove">&nbsp;<i class="glyphicon glyphicon-remove"></i></button></div>'
		
		if('{{$targetid}}'!=''){
			var target_obj = $('#{{$targetid}}');
			if(window.opener){
				target_obj = window.opener.document.getElementById('{{$targetid}}');
			}
			
			var exist_flag = false;
			$(target_obj).find('.btn-group').each(function(){
				if($(this).attr('rel')==rel){
					exist_flag = true;
				}
			});
			if(!exist_flag){
				$(html).appendTo($(target_obj)); //不存在时，插入
			}
		}
		$(html).appendTo('#{{$pageID}}-selected');
		$(this).remove();
	});
	// click绑定到<i></i>无效，绑定到上级的btn
	$('#{{$pageID}}-selected').on('click','.btn-remove',function(){
		var obj = $(this).closest('.btn-group');
		var html = '<a href="javascript:;" rel="'+obj.attr('rel')+'" class="btn btn-xs btn-info" type="button">'+obj.attr('relword')+'</a>'
		$(html).appendTo('#{{$pageID}}-words');
		obj.remove();
		if('{{$targetid}}'!=''){
			var target_obj = $('#{{$targetid}}');
			if(window.opener){
				target_obj = window.opener.document.getElementById('{{$targetid}}');
			}
			$(target_obj).find('.btn-group').each(function(){
				if($(this).attr('rel')==obj.attr('rel')){
					$(this).remove();
				}
			});
		}
	});
	
})
</script>